<template>
    <div class="background">
        <div class="topNav">
            <div class="exit" @click="exit"><van-icon name="arrow-left" color="white" size="25" /></div>
            <div class="ziti">米圈</div>
            <div class="select">
                <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
                    <template #reference>
                        <van-icon name="weapp-nav" color="white" size="25" />
                    </template>
                </van-popover>
                
                
            </div>
        </div>
        <div class="shanxing">

        </div>
    </div>
    
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router'
import { comemntList } from '../../api/commonent'


const router=useRouter()
const showPopover = ref(false);
const commonentData=ref([])
const actions = [
      { text: '分享',icon:'share-o'},
      { text: '首页',icon:'wap-home-o'},
      { text: '消息通知',icon:'coupon-o' },
      { text:'米圈规则',icon:'warning-o'}
    ];
const onSelect=(action:any)=>{
    if (action.text=='首页') {
        console.log('hhh');   
    }
    if(action.text=='分享'){
        console.log('分享');
    }
    if(action.text=='消息通知'){
        console.log('消息通知');
        
    }
    if(action.text=='米圈规则'){
        console.log('米圈规则');
        
    }
}
const exit=()=>{
    router.back()
}
const getData=async(id:any)=>{
    let data =await comemntList(id)
    commonentData.value=data.data.data
    console.log(commonentData.value);
    
}
getData(19440)
</script>
<style scoped>
.background {
    width: 100%;
    height: 30%;
    background-size: cover;
    background: url(https://m.mi.com/static/img/bg.813761e1fe.jpeg) top no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.topNav {
    margin-top: 15px;
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ziti {
    font-weight: bold;
    font-size: 20px;
    color: wheat;
}

.exit {
    margin-top: 5px;
}

.select {
    margin-top: 5px;
}
.tixing{
    width: 100%;
    height: 70%;
    background-color: aqua;
}
.shanxing{
    width: 100%;
    height: 500px;
    background-color:white;
    border-radius: 30px 30px 0 0 ;
    position: absolute;
    top: 70%;
}
</style>